<script lang="ts" setup>
import { computed, ref } from 'vue'
/**
 * 分类名称
 * 启用状态
 */
interface User {
  date: string
  name: string
  address: string
}

const tableData = ref([
  {
    name: '裤子1',
    state: false,
    count: 100,
  },
  {
    name: '裤子2',
    state: true,
    count: 200,
  },
  {
    name: '裤子3',
    state: false,
    count: 300,
  },
  {
    name: '裤子4',
    state: false,
    count: 400,
  },
])

const dataState = computed(() => {
    return tableData.value.filter(v => v.state).length
})
const dataNoState = computed(() => {
    return tableData.value.filter(v => !v.state).length
})
const dataCount = computed(() => {
    return tableData.value.reduce((total, item) => {
      return total+item.count
    }, 0)
})
const dataStateCount = computed(() => {
  return tableData.value.filter(v => v.state).reduce((total, item) => {
      return total+item.count
    }, 0)
})
const dataNoStateCount = computed(() => {
  return tableData.value.filter(v => !v.state).reduce((total, item) => {
      return total+item.count
    }, 0)
})


</script>

<template>
    <el-card class="box-card">
      <template #header>
      <div class="card-header">
        <span>test</span>
        <div>
          <el-button type="primary">Primary</el-button>
          <el-button type="danger">Danger</el-button>
        </div>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="商品名称"  />
      <el-table-column prop="count" label="商品数量"  >  
        <template #default="{row}">
          <el-input-number v-model="row.count" size="small"  @change="handleChange" />
        </template>
      </el-table-column>
      <el-table-column prop="state" label="是否核对"  >
        <template #default="{row}">
          <el-switch
            v-model="row.state"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </template>
      </el-table-column>
      <el-table-column prop="state" label="核对状态" >
        <template #default="{row}">
          <el-tag :type="row.state ? 'primary' : 'danger'" >{{ row.state ? '已核对' : '未核对' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <template #default="{row}">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
    </el-table>

    <template #footer>
      <span>总商品 </span>
      <el-tag type="primary" size="Small">{{ tableData.length }}</el-tag>
      <span>已核对商品 </span>
      <el-tag type="primary" size="Small">{{ dataState  }}</el-tag>
      <span>未核对商品 </span>
      <el-tag type="primary" size="Small">{{ dataNoState }}</el-tag>

      <span>总商品数量  </span>
      <el-tag type="primary" size="Small">{{ dataCount }}</el-tag>
      <span>已核对数量  </span>
      <el-tag type="primary" size="Small">{{ dataStateCount }}</el-tag>
      <span>未核对数量  </span>
      <el-tag type="primary" size="Small">{{ dataNoStateCount }}</el-tag>
      
    </template>
    </el-card>
</template>


<style lang="less" scoped>
.box-card {
    margin: 20px;
    .card-header {
      display: flex;
      justify-content: space-between;
    }
}
</style>